<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row
        class="toolbar searchInputWidth"
        style="padding-bottom: 0; margin-bottom: 0"
      >
        <el-form :inline="true" :model="filterField">
          <el-form-item label="设备类型" class="row-padding-bottom formItem">
            <el-select
              v-model="filterField.keyType"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) of keyTypeData"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-input
              class="input"
              placeholder="请输入内容"
              v-model="filterField.key"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="commonBtn"
                ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <exportBtn
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_SYS_CACHE"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80px"
          ></el-table-column>
          <el-table-column prop="key" label="类型" align="center">
          </el-table-column>
          <el-table-column label="操作" align="left" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" @click="detail(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
          v-show="isShowPagination"
        ></Pagination>
      </div>
    </div>
    <el-dialog
      title="值"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="cancel('formData')"
      custom-class="brand-dialog-min-width"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div>{{ text }}</div>
    </el-dialog>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'cacheView',
  mixins: [scrollTable],
  data() {
    return {
      isShow: false,
      titleText: '缓存管理',
      //表格数据
      tableList: [],
      requestUrl: '/api-m/cache/keyList',
      //搜索条件
      filterField: {
        keyType: '',
        key: '',
      },
      formVisible: false,
      text: '',
      keyTypeData: [
        { name: '宇泛', code: 1 },
        { name: '中控', code: 2 },
      ],
      isShowPagination: false,
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {},
  methods: {
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    detail(row) {
      this.text = row.value
      this.formVisible = true
    },
    cancel(formData) {
      this.formVisible = false
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.mainCon {
  top: 196px;
}
.input {
  width: auto;
}
</style>
